

<template>
  <div class="container" id="container">
    <header class="header">智慧上海驾驶舱</header>
    <section class="leftTop"></section>
    <section class="leftCenter"></section>
    <section class="leftFooter"></section>
    <section class="rightTop"></section>
    <section class="rightCenter"></section>
    <section class="rightFooter"></section>
  </div>
</template>

<script lang="ts" setup>
let scene = null as any,//场景
camera = null as any,//相机
renderer = null as any,//渲染器
controls = null as any//轨道控制器
import {onMounted } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
console.log(THREE)

//设置three的方法
const render = async () =>{
  //1.创建场景
  scene = new THREE.Scene();

  //2.创建相机
  camera = new THREE.PerspectiveCamera(105,window.innerWidth/window.innerHeight,0.1,1000);
  //3.设置相机位置
  camera.position.set(0,0,4);
  scene.add(camera);
  //4.建立3个坐标轴
  // const axesHelper = new THREE.AxesHelper(5);
  // scene.add(axesHelper);
  //5.导入gltf模型
  const gltfLoader = new GLTFLoader();
  
  gltfLoader.load('./model/scene.gltf',function(object){
    console.log(object)
    scene.add(object.scene);
  });
  
  //6.设置环境光，要不然模型没有颜色
  let ambientLight = new THREE.AmbientLight(); //设置环境光
  scene.add(ambientLight); //将环境光添加到场景中
  let pointLight = new THREE.PointLight();
  pointLight.position.set(200, 200, 200); //设置点光源位置
  scene.add(pointLight); //将点光源添加至场景


  //7.初始化渲染器
  //渲染器透明
  renderer = new THREE.WebGLRenderer({alpha:true});
  //设置渲染器尺寸大小
  renderer.setClearColor(0x228b22,0.1);
  renderer.setSize(window.innerWidth,window.innerHeight);
  //将webgl渲染的canvas内容添加到div
  let container = document.getElementById('container') as any;
  container.appendChild(renderer.domElement);
  //使用渲染器 通过相机将场景渲染出来
  renderer.render(scene,camera);
  controls = new OrbitControls(camera,renderer.domElement);
}
const animate = () =>{
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
}

onMounted(()=>{
  render()
  animate()
})
</script>


<style scoped>
.container{
  width:100vw;
  height: 100vh;
}
.header{
  width: 100vw;
  height: 40px;
  position: fixed;
  top: 0;
  text-align: center;
  font-size: 18px;
  letter-spacing: 4px;
  line-height: 30px;
  color:#fff;
  background-image: url("../public/img/23.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.leftTop{
  width: 200px;
  height: 160px;
  position: fixed;
  top: 40px;
  left:20px;
  border-radius: 10px;
  background-color: rgba(6,7,80,0.6);
}
.leftCenter{
  width: 200px;
  height: 160px;
  position: fixed;
  top: 40px;
  left:20px;
  border-radius: 10px;
  background-color: rgba(6,7,80,0.6);
}
.leftFooter{
  width: 200px;
  height: 160px;
  position: fixed;
  top: 40px;
  left:20px;
  border-radius: 10px;
  background-color: rgba(6,7,80,0.6);
}
.rightTop{
  width: 200px;
  height: 160px;
  position: fixed;
  top: 40px;
  left:20px;
  border-radius: 10px;
  background-color: rgba(6,7,80,0.6);
}
.rightCenter{
  width: 200px;
  height: 160px;
  position: fixed;
  top: 40px;
  left:20px;
  border-radius: 10px;
  background-color: rgba(6,7,80,0.6);
}
.rightFooter{
  width: 200px;
  height: 160px;
  position: fixed;
  top: 40px;
  left:20px;
  border-radius: 10px;
  background-color: rgba(6,7,80,0.6);
}
</style>
